<template>
<div  class="new_item">
  <div @click="itemclick">
<!--      <div class="image_header">-->
<!--                <van-image round width="40px" height="40px"-->
<!--  :src="'http://127.0.0.1:8000/'+img_header" v-if="img_header"-->
<!--/>-->
<!--        <van-image round width="40px" height="40px" v-else-->
<!--                   src="http://127.0.0.1:8000/media/badmin.png"-->
<!--/>-->
    <div class="image_header">
<img :src="'/api/'+img_header" v-if="img_header" class="header_img">
      <span class="my-icon" v-else>&#xe612;</span>
    </div>
<!--      </div>-->
<!--      <van-tag round type="warning" class="tag_name">Lv1</van-tag>-->
     <span class="name" v-if="nickname">{{nickname}}</span>
      <span class="name" v-else>苦涩的笑容</span>


      <span class="sex"><i class="iconfont icon-nansheng"></i></span>
      <span class="zhushi">发帖：{{this.newlist.create_time|agoTime}}<span>最后回复：2小时前</span></span>
      <div class="title">{{this.newlist.title}}</div>
      <div  class="content_view">{{this.newlist.content}}</div>
<!--      <div class="imgbox" v-show="this.newlist.pic1&&this.newlist.pic2">-->
<!--    <div>{{this.newlist}}</div>-->
          <div class="imgbox" v-show="this.newlist.pic1">

        <div v-if="this.newlist.pic1" class="box1"><img :src="'/api/'+this.newlist.pic1" class="img" v-show="this.newlist.pic1"></div>

        <div v-if="this.newlist.pic2" class="box1"> <img :src="'/api/'+this.newlist.pic2" class="img" v-show="this.newlist.pic2"></div>
        <div v-if="this.newlist.pic3" class="box1"> <img :src="'/api/'+this.newlist.pic3" class="img" v-show="this.newlist.pic3"></div>
</div>
        </div>
    <div class="bottom_edit">
      <van-row>

  <van-col span="8" class="van-hairline--right"><van-icon name="comment-o" /><span class="num">{{this.newlist.comment_num}}</span></van-col>
  <van-col span="8" class="van-hairline--right" @click="addgood()"><van-icon name="good-job-o" :style="{color:clickcolor}" /><span class="num">{{liked_count}}</span></van-col>
  <van-col span="8"><van-icon name="eye-o" /><span class="num">{{this.newlist.read_num}}</span></van-col>
</van-row>
    </div>
</div>
</template>

<script>
import {post_article_like} from "@/network/Likes/Likes";
import {Authormessage} from "@/network/Users/get_info";

export default {
name: "Articlesmallitem",
  data(){
  return {
    is_liked:false,
    liked_count:this.newlist.like_num,
    liked:false,
    clickcolor:''
  }
  },
  props:{
  newlist:{
    default:{}
  },
    img_header:'',
    nickname:''
  },
    methods:{

 toggle_like: function () {
            // 如果liked为false 则like_count++ 并把liked取反

        },
  itemclick(){
    console.log(this.newlist);
    this.$router.push('article/'+this.newlist.id)
  },
    addgood(){
      post_article_like('forum',this.newlist.id).then(
          res=>{
            console.log(res);
          }
      )
       if (!this.liked) {
         this.clickcolor='red'
                this.liked_count++
            } else {
         this.clickcolor=''
                // liked 为true时 like_count-- 并把liked取反
                this.liked_count--
            }
            this.liked = !this.liked //把liked取反
      console.log(this.liked_count);
    }
  },
      filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0,20) + '...'
      }
      return value
    },

      filterHtml(value){
      return value.replace((/<[^>]*>/g))
      },
              agoTime(dateTimeStamp) {
      dateTimeStamp = new Date(dateTimeStamp).getTime(); // 获取到时间的毫秒数
      let result = null;
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      var week = day * 7;
      var halfamonth = day * 15;
      var month = day * 30;
      var now = new Date().getTime(); //获取当前时间毫秒
      // console.log(now)
      var diffValue = now - dateTimeStamp; //时间差
      if (diffValue < 0) {
        return;
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      var weekC = diffValue / week;
      var monthC = diffValue / month;
      if (monthC >= 1 && monthC <= 3) {
        result = " " + parseInt(monthC) + "月前";
      } else if (weekC >= 1 && weekC <= 3) {
        result = " " + parseInt(weekC) + "周前";
      } else if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        var datetime = new Date();
        datetime.setTime(dateTimeStamp);
        var Nyear = datetime.getFullYear();
        var Nmonth =
          datetime.getMonth() + 1 < 10
            ? "0" + (datetime.getMonth() + 1)
            : datetime.getMonth() + 1;
        var Ndate =
          datetime.getDate() < 10
            ? "0" + datetime.getDate()
            : datetime.getDate();
        var Nhour =
          datetime.getHours() < 10
            ? "0" + datetime.getHours()
            : datetime.getHours();
        var Nminute =
          datetime.getMinutes() < 10
            ? "0" + datetime.getMinutes()
            : datetime.getMinutes();
        var Nsecond =
          datetime.getSeconds() < 10
            ? "0" + datetime.getSeconds()
            : datetime.getSeconds();
        result = Nyear + "-" + Nmonth + "-" + Ndate;
      }
      return result;
    }
},
  created() {
    // Authormessage(this.newlist.id).then(
    //     res=>{
    //       // console.log(res);
    //     }
    // )
    // console.log(this.newlist);
    // console.log('xiao');
    // console.log(this.newlist);
  }
}
</script>

<style scoped>
.new_item{
  background-color: white;
  margin-bottom: 10px;
  padding: 15px;
}
.imgbox{
  display: flex;


}
.zhushi span{
  margin-left: 12px;
}
.zhushi{
  font-size: 12px;
  color: #a8a8a8;
  position: relative;
  top: -38px;
left: 50px;
  display: block;
  width: 240px;
}
.tag_name{
  position: relative;
  top: -20px;
  left: 23px;
}
.bottom_edit{
  margin-top: 10px;
  text-align: center;
}
.newcolor{
  color: red;
}
.big_item{
  padding: 15px;
  margin-bottom: 10px;
  background-color: white;
  position: relative;
  cursor: pointer;
}
#articleitem{

}
.sex{
  position: relative;
  top: -42px;
  left: 47px;
}
.num{
  margin-left: 4px;
}
.name{
position:relative;
top: -43px;
left: 50px;
font-size: 14px;
  color: #1CB194;
}
.content_view{
  padding:0px 0px 15px 0px;
  color: #a8a8a8;
  font-size: 14px;
  position: relative;
top: -10px;
color: gray;
}
.img{
  flex: 1;

  width: 100%;
  image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
/*image-rendering: -webkit-optimize-contrast;*/
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
  max-width: 250px;
max-height: 500px;
border-radius: 6px;
}
.box1{
  flex: 1;
}
.title{
  position: relative;
top: -21px;
color: black;
  font-size: 14px;
}
.header_img{
  border-style: none;
width: 40px;
height: 40px;
display: block;
border-radius: 50px;
}
.my-icon{
    font-family: "my-icon" !important;
  font-size: 32px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-left: 3px;
  color: skyblue;

}
img{
  /*max-height: 350px!important;*/
}
</style>